<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>剪刀石头布</title>
	<style>
		.selecimg{
			display: inline-block;
		    width: 168px;
    height: 134px;
    border: 1px solid;
position: relative;
cursor: pointer;
    overflow: hidden;}

    .selecimg>span{
    	position: absolute;
    top: -25px;}

    

		.container{
			margin: 50px auto;
			width: 700px;
			text-align: center;
		}
		#result{
			margin-top: 30px;
		}

	</style>
</head>
<body>
	<div class="container"><!--外层容器-->
		<div id="select">
			<div class="selecimg"><img src="jiandao.png" id="jiandao" alt=""></div>
			<div class="selecimg"><img src="shitou.png" id="shitou" alt=""></div>
			<div class="selecimg"><img src="bu.png" id="bu" alt=""></div>
		</div>
		

		<div id="result">
		<h1 id="rc" style="color:red"></h1>
			<div class="selecimg"><span>你的</span><img id="mine" src="" alt=""></div>
			<div class="selecimg"><span>电脑</span><img id="cpt" src="" alt=""></div>

		
		<div id="cpunt">你赢了<span id="scount">0</span>次

	</div>
<script type="text/javascript">
	var ses=["jiandao","shitou","bu"];
	function cptGo(index) {
		setTimeout(function(){
		var t = document.getElementById("cpt");
       var rand=Math.floor(Math.random()*3);
       t.setAttribute('src',ses[rand]+".png");
      if((index-rand+3)%3==1){
      	var s = document.getElementById("scount")
      	s.innerHTML=s.innerHTML*1+1;
      	document.getElementById("rc").innerHTML="你赢了";
      }else{document.getElementById("rc").innerHTML="你输了";

      }
      document
   .getElementById("cpt").style.opacity=1;
},1000);
	}
	ses.forEach((item,index)=>{
var t = document.getElementById(item);
t.addEventListener('click',function(){
	document
	.getElementById('mine')
	.setAttribute('src',item+".png");
   //    opacity
   document
   .getElementById("cpt").style.opacity=0;
   cptGo(index);

	
})
console.log(t);

	});
</script>

</body>
</html>